window.addEventListener('load', function () {
    // 轮播图
    new Swiper('.swiper', {
        autoplay: true,//可选选项，自动滑动
        loop: true,
        pagination: {
            el: '.swiper-pagination',
        },
    })


    
    // 页面数据动态渲染
    /*
    1：获取数据源 ----后期Ajax
    2：定义变量保存渲染循环出来的结构
    3：遍历数据源，拼接html结构
    4：把指定拼接好的结构放到指定位置
     */
    let arr = [
        {
            imgUrl: `./imgs/service01.svg`,
            title: `API私有化服务`,
            intro: `可部署本地&专有云的Web API`,
            serch: `去搜索`
        },
        {
            imgUrl: `./imgs/service02.svg`,
            title: `源码云监测`,
            intro: `实时代码托管、威胁情报监控`,
            serch: `去搜索`
        },
        {
            imgUrl: `./imgs/service03.svg`,
            title: `源码有赢`,
            intro: `一站式营销活动服务平台`,
            serch: `去搜索`
        },
        {
            imgUrl: `./imgs/service04.svg`,
            title: `YuanMa API`,
            intro: `API开发者协作平台`,
            serch: `去搜索`
        }

    ]
    let servHtml = '';

    // 变量
    arr.forEach(function (v) {
        servHtml += `<li>
            <img src="${v.imgUrl}" alt="">
            <div class="plr20 ">
                <h4>${v.title}</h4>
                <p>${v.intro}</p>
                 <a href="#">${v.serch}</a>
            </div>
        </li>
        `
    })
    let serviceList = document.querySelector('#serviceList').innerHTML = `${servHtml}`


    // moreApi 渲染
    let moreApiArr = [
        {
            img1Url: `./imgs/api01.svg`,
            img2Url: `./imgs/api01-c.svg`,
            text1: `生活服务`
        },
        {
            img1Url: `./imgs/api02.svg`,
            img2Url: `./imgs/api02-c.svg`,
            text1: `金融科技`
        },
        {
            img1Url: `./imgs/api03.svg`,
            img2Url: `./imgs/api03-c.svg`,
            text1: `交通地理`
        },
        {
            img1Url: `./imgs/api04.svg`,
            img2Url: `./imgs/api04-c.svg`,
            text1: `充值缴费`
        },
        {
            img1Url: `./imgs/api05.svg`,
            img2Url: `./imgs/api05-c.svg`,
            text1: `数据智能`
        },
        {
            img1Url: `./imgs/api06.svg`,
            img2Url: `./imgs/api06-c.svg`,
            text1: `企业工商`
        },
        {
            img1Url: `./imgs/api07.svg`,
            img2Url: `./imgs/api07-c.svg`,
            text1: `应用开发`
        },
        {
            img1Url: `./imgs/api08.svg`,
            img2Url: `./imgs/api08-c.svg`,
            text1: `电子商务`
        },
        {
            img1Url: `./imgs/apic1.svg`,
            img2Url: `./imgs/apic1-c.svg`,
            text1: `吃喝玩乐`
        },
        {
            img1Url: `./imgs/apic2.svg`,
            img2Url: `./imgs/apic2-c.svg`,
            text1: `文娱视频`
        }
    ]
    let moreApiHtml = '';
    moreApiArr.forEach(function (v) {
        moreApiHtml += `
        <li class="rel">
        <div class="item01">
            <img src="${v.img1Url}" alt="" class="abs">
            <a href="#" class="font16 abs">${v.text1}</a>
        </div>
        <div class="item02">
            <img src="${v.img2Url}" alt="" class="abs">
            <a href="#" class="font16 abs">${v.text1}</a>
        </div>
        </li>
        `
    let moreApi = document.querySelector('.more-api').innerHTML = `${moreApiHtml}`

    })

    // 轮播底部
    new Swiper('.swiper1', {
        autoplay: true,//可选选项，自动滑动
        loop: true,
        effect : 'fade',
    
    })

    
    /*
        添加点击事件
        当滚动条距离顶部达到某一个值时，reTop出现
        点击reTop的时候，返回顶部
    */
    let reTop = this.document.querySelector('#returnTop')
    let tId = null;
    reTop.addEventListener('click',function(){
        clearInterval(tId)
        tId = setInterval(function(){
        let sTop = document.documentElement.scrollTop

            document.documentElement.scrollTop = sTop-20
            if (sTop <= 0) {
                clearInterval(tId)
            }
        },10)
    })
    
})